<template>
<!-- 月累 -->
    <div class="leiji">
        <h3 class="title">{{title}}</h3>
        <p class="time">2000/1/01~至今</p>
        <div class="barChart" id="barChart"></div>
    </div>
</template>

<script>
export default {
    props:['compFlag'],
    watch:{
        compFlag(newval){
            this.title = newval=='tem'?'30年月平均气温':'30年平均月累计降雨|mm'
        }
    },
    data(){
        return{
            max:'>11级',
            title:'',
            options:{
                tooltip: {
                    trigger: 'axis',
                   formatter:(params)=>{
                       return params[0].name+' : '+params[0].value+'天'
                   }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    top:'10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['7级','8级','9级','10级','11级','>11级'],
                        axisTick: {
                            show:false,
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#0A3857',
                            }
                        },
                        axisLabel:{
                            color:'#63E3FF'
                        },
                        
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine:{
                            show:false,
                        },
                        axisTick: {
                            show:false,
                        },
                        axisLabel:{
                            color:'#63E3FF'
                        },
                        splitLine:{
                            lineStyle:{
                                color:'#0A3857',
                            }
                        }
                        
                    }
                ],
                series: [
                    {
                        barWidth: 14,
                        type: 'bar',
                        data: [10, 8, 5, 4, 3, 2, 1],
                        itemStyle: {
                          normal: {
                            color:(param)=>{
                                if(param.name==this.max){
                                    return  {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                          {
                                            "offset": 0,
                                            "color": "#FFF5C3"
                                          },
                                          {
                                            "offset": 1,
                                            "color": "#FF570C"
                                          }
                                        ],
                                        "globalCoord": false
                                    }
                                }else{
                                    return {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                          {
                                            "offset": 0,
                                            "color": "#01F4FD"
                                          },
                                          {
                                            "offset": 1,
                                            "color": "#0170FE"
                                          }
                                        ],
                                        "globalCoord": false
                                    }
                                }
                            },
                          }
                        },                     
                    }
                ]
            }
        }
    },
    methods:{
        initCharts(){
            let barChart = document.getElementById('barChart')
            let fsize = document.body.clientWidth/1920*16
            barChart.style.height = document.body.clientWidth<=1920? fsize*15+'px':'15rem'
            var myChart = this.$echarts.init(barChart); 
            myChart.setOption(this.options)
        }
    },
    mounted(){
        this.title = '风速大于7级天数统计'
        this.initCharts()
    }   
}
</script>
<style lang="scss" scoped>
    .leiji{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        position: relative;
        h3{
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            text-align:center;
            height:2.3rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
            width:18rem;
        }
        .time{
            position:absolute;
            right:1rem;
            top:1rem;
            color:#fff;
        }
        .barChart{
        }
    }
</style>